import React from 'react'
import moment from "moment";
import homeSrc from "../../../res/images/web/euro/欧洲杯／主队-缺省@2x.png";
import awaySrc from "../../../res/images/web/euro/欧洲杯／客队-缺省@2x.png";
import videoSrc from "../../../res/images/web/euro/video@2x.png";
import fireSrc from "../../../res/images/web/euro/火@2x.png";
import countSrc from "../../../res/images/web/euro/方案+@2x.png"
import {withRouter} from 'react-router-dom'
import {log} from "../../../utils/commonfunc";
import {pushWithSearch} from "../../mall/mall";
import hongSrc from "../../../res/images/web/euro/翻红@2x.png"
import heiSrc from "../../../res/images/web/euro/黑@2x.png"
import zouSrc from "../../../res/images/web/euro/走@2x.png"
import {addLinkAndClick} from "../../GradePlayer/GradePlayer";
import {test} from "../../../utils/constants";

const EuroGameCard = (props) => {

    const game = props.game
    const date = moment(new Date(game.Startt * 1000)).format('YYYY年MM月DD日 HH:mm')
    const status = game.State
    // const status = 3
    const isEarly = status === 1
    const isStarted = status >= 2 && status <= 7
    // const isFirstHalf = status === 2
    // const isHalfTime = status === 3
    // const isSecondHalf = status === 4
    // const isJiashi = status === 5
    const isFinished = status === 8
    const isDelay = status >= 9

    const homeWin = game.Zhufen > game.Kefen
    const awayWin = game.Zhufen < game.Kefen

    const live = game.Zhibo

    const voted = game.Who.length > 0
    const homeVoted = voted && game.Who === 'zhu'
    const awayVoted = voted && game.Who === 'ke'

    const voteResult = game.Result2
    const resulted = voteResult > 0
    let resultSrc = ''
    if (voteResult === 1) {
        resultSrc = hongSrc
    } else if (voteResult === 2) {
        resultSrc = heiSrc
    } else if (voteResult === 3) {
        resultSrc = zouSrc
    }


    const goToGame = () => {
        log(game)
        const base = test ? 'http://123.207.85.242:8080/' : 'http://www.youtoball.com:8080/'
        const path = `game/${game.Namiid}`
        addLinkAndClick(base + path)
        // pushWithSearch(props.history, `./game/${game.Namiid}`,)
    }

    const statusTexts = [
        '未赛',
        '比赛中',
        '比赛中',
        '比赛中',
        '比赛中',
        '比赛中',
        '比赛中',
        '完赛',
        '推迟',
        '推迟',
        '推迟',
        '推迟',
        '推迟',
    ]
    const statusText = statusTexts[status - 1]

    let voteHomeButton = (isEarly || isStarted) ? (
        <button className='euro-game-plan-button'
                onClick={() => props.goToEuroPlan(game, true)}
        >
            去支持
        </button>
    ) : (
        <button className='euro-game-plan-button-gray'
        >
            去支持
        </button>
    )

    let voteAwayButton = (isEarly || isStarted) ? (
        <button className='euro-game-plan-button'
                onClick={() => props.goToEuroPlan(game, false)}
        >
            去支持
        </button>
    ) : (
        <button className='euro-game-plan-button-gray'>
            去支持
        </button>
    )

    if (voted) {

        if (awayVoted) {
            voteHomeButton = null
        }
        if (homeVoted) {
            voteAwayButton = null
        }
    }

    const homeVotedCount = <div className='euro-game-pack-count'>
        <img alt='' src={countSrc} className='euro-game-pack-count-src'/>
        <span>+{game.Count}份</span>
    </div>

    const awayVotedCount = <div className='euro-game-pack-count'>
        <img alt='' src={countSrc} className='euro-game-pack-count-src'/>
        <span>+{game.Count}份</span>
    </div>

    return <div className='euro-game-container' key={game.Id}>
        <div className='euro-game-container-top'>
            <div className='euro-game-date'>
                <span>
                    {date}
                </span>
                <span>
                    胜 {game.Awardzhu} 负 {game.Awardke}
                </span>
            </div>
        </div>
        <div className='euro-game-container-main'>
            <div className='flex-align-center'>
                <div className='flex-1' onClick={goToGame}>
                    <div className='flex-space-between-align-center mg-b-6px'>
                        <div className='euro-game-team'>
                            <img alt=''
                                 src={game.Zhuimg ? game.Zhuimg : homeSrc}
                                 style={{
                                     height: game.Zhuimg ? '30px' : '20px',
                                 }}
                            />
                            <span>
                                {game.Zhuname}
                            </span>
                            {homeVoted && homeVotedCount}
                        </div>
                        <span className='euro-game-team-score'
                              style={{color: homeWin ? '#333333' : '',}}
                        >
                            {(isFinished || isStarted) ? game.Zhufen : '-'}
                        </span>
                    </div>
                    <div className='flex-space-between-align-center'>
                        <div className='euro-game-team'>
                            <img alt=''
                                 src={game.Keimg ? game.Keimg : awaySrc}
                                 style={{
                                     height: game.Keimg ? '30px' : '20px',
                                 }}
                            />
                            <span>
                                {game.Kename}
                            </span>
                            {awayVoted && awayVotedCount}
                        </div>
                        <span className='euro-game-team-score'
                              style={{color: awayWin ? '#333333' : '',}}
                        >
                            {(isFinished || isStarted) ? game.Kefen : '-'}
                        </span>
                    </div>
                </div>

                <div className='flex-1 flex-align-center mg-l-12px'>

                    {((isFinished || isDelay) && !resulted) && (
                        <div className='euro-game-status euro-game-status-end' onClick={goToGame}>
                            <span>{statusText}</span>
                        </div>
                    )}
                    {isEarly && !resulted && (
                        <div className='euro-game-status' onClick={goToGame}>
                            <span>{statusText}</span>
                        </div>
                    )}
                    {isStarted && !resulted && (
                        <div className='euro-game-status-started' onClick={goToGame}>
                            {live && <img src={videoSrc} alt=''/>}
                            <p>比赛中</p>
                        </div>
                    )}
                    {resulted && <img src={resultSrc} alt='' className='euro-game-result-img' onClick={goToGame}/>}

                    <div className='euro-game-plan'>
                        <div className='flex-space-between-align-center mg-b-16px'>
                            <div className='euro-game-plan-hot'>
                                <img src={fireSrc} alt=''/>
                                <span>{game.Zhucount + game.Fakezhucount}</span>
                            </div>
                            {voteHomeButton}
                        </div>
                        <div className='flex-space-between-align-center'>
                            <div className='euro-game-plan-hot'>
                                <img src={fireSrc} alt=''/>
                                <span>{game.Kecount + game.Fakekecount}</span>
                            </div>
                            {voteAwayButton}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

export default withRouter(EuroGameCard)